<script setup>
import TextUnderColor from "@/components/TextUnderColor.vue";
import { ref, onMounted } from "vue";
import { fetchIllustrations } from "@/api/share";
const illustration = ref([]);

onMounted(() => {
  fetchIllustrations().then((res) => {
    console.log(res.data.data);
    illustration.value = res.data.data;
  });
});
</script>

<template>
  <div>
    <div class="video-container">
      <div class="video-input flex flex-align-center">
        <div class="flex flex-align-center">
          <svg
            t="1732546529917"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="38018"
            width="28"
            height="28"
          >
            <path
              d="M742 626.5c-30.6 48.4-72.4 88.9-121.9 117.8l199 199L939 823.5l-197-197z"
              fill="#ffffff"
              p-id="38019"
            ></path>
            <path
              d="M441.1 809.8C235.6 809.8 68.3 642.6 68.3 437c0-205.6 167.2-372.8 372.8-372.8 205.6 0 372.8 167.2 372.8 372.8 0 205.6-167.2 372.8-372.8 372.8z m0-711.8c-186.9 0-339 152.1-339 339s152.1 339 339 339 339-152.1 339-339-152-339-339-339z"
              fill="#ffffff"
              p-id="38020"
            ></path>
            <path
              d="M819.1 960.2c-4.3 0-8.7-1.7-12-5l-199-199c-3.7-3.7-5.5-8.9-4.8-14.1 0.7-5.2 3.7-9.8 8.3-12.4 47-27.4 87.1-66.2 116.1-112.2 2.7-4.3 7.3-7.2 12.4-7.8 5-0.5 10.2 1.2 13.8 4.9l197 197c3.2 3.2 5 7.5 5 12s-1.8 8.8-5 12L831.1 955.3c-3.3 3.3-7.7 4.9-12 4.9z m-172-212.8l172 172 95.9-95.9L744.6 653c-26.5 37.1-59.7 69.2-97.5 94.4zM626.2 267.1c-4.7 0-9.4-1.9-12.7-5.8C505 137.4 348 213.8 346.4 214.6c-8.3 4.1-18.5 0.8-22.7-7.6-4.2-8.4-0.8-18.5 7.6-22.7 1.8-0.9 182.2-88.8 307.7 54.7 6.1 7 5.4 17.7-1.6 23.9-3.3 2.8-7.2 4.2-11.2 4.2z"
              fill="#ffffff"
              p-id="38021"
            ></path>
          </svg>
          <input
            type="text"
            class="video_input"
            autofocus
            placeholder="请输入关键字："
          />
        </div>
      </div>
      <video
        class="video"
        loop
        autoplay
        src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/1ec773e230fbc989f2d4f730dae7116e_preview.mp4"
      ></video>
    </div>
    <div style="height: 20px"></div>
    <div style="margin: 1rem 0" class="flex flex-align-center gap-10">
      <svg
        t="1732608609339"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5086"
        width="32"
        height="32"
      >
        <path
          d="M511.994264 511.994264m-511.994264 0a511.994264 511.994264 0 1 0 1023.988529 0 511.994264 511.994264 0 1 0-1023.988529 0Z"
          fill="#28176D"
          p-id="5087"
        ></path>
        <path
          d="M616.737831 404.853216v-75.021677c0-2.684262-0.137654-5.460293-0.298251-8.259267H466.683007v2.294241l-67.794818 81.365252z"
          fill="#F8C642"
          p-id="5088"
        ></path>
        <path
          d="M534.512239 170.783291c-7.502168-3.005456-15.004335-5.99944-22.506503-5.99944a45.139189 45.139189 0 0 0-45.013006 45.013006v111.775415h149.745101c-3.028398-51.976027-33.81711-122.317452-82.225592-150.788981z"
          fill="#FC3A64"
          p-id="5089"
        ></path>
        <path
          d="M301.93357 434.873357h-36.914336v254.729565h-68.116011v90.370148c0 9.004895 5.99944 15.004335 15.004335 15.004335h90.026012c9.004895 0 15.004335-5.99944 15.004335-15.004335V449.877693c0.011471-9.004895-5.99944-15.004335-15.004335-15.004336z"
          fill="#F8C642"
          p-id="5090"
        ></path>
        <path
          d="M265.019234 434.873357h-53.111676c-9.004895 0-15.004335 5.99944-15.004335 15.004336v239.748171h68.127483z"
          fill="#FFFFFF"
          p-id="5091"
        ></path>
        <path
          d="M827.108248 482.880348v-1.502728c0-41.135739-29.515409-72.842148-68.230723-76.191739H399.186441l-52.239865 62.690131v132.217102h465.409703z"
          fill="#7B49B6"
          p-id="5092"
        ></path>
        <path
          d="M520.471484 600.093114v194.884291h201.594946c40.516294 0 75.021677-33.014126 75.021676-73.518949l15.268173-121.376813z"
          fill="#FFFFFF"
          p-id="5093"
        ></path>
        <path
          d="M346.946576 600.093114v143.871845L393.46231 766.471462c36.019582 18.009791 78.027132 28.505943 118.497541 28.505943h8.47722V600.093114z"
          fill="#FC3A64"
          p-id="5094"
        ></path>
      </svg>
      <TextUnderColor :beforeColor="'#082249'" text="热门帖子"></TextUnderColor>
    </div>
    <div class="gird gird-5 gap-20">
      <div class="text-left article-item" v-for="item in illustration">
        <img
          :src="item.src"
          style="border-radius: 20px 20px 0 0"
          alt=""
          width="100%"
        />
        <div style="padding: 1rem" class="flex flex-column gap-20">
          <p class="article-title">{{ item.title }}</p>
          <div class="flex flex-center gap-5 flex-between">
            <div class="flex flex-align-center gap-5">
              <img :src="item.avatar" alt="" class="article-avatar" />
              <small>{{ item.author }}</small>
            </div>
            <div class="flex flex-align-center">
              <svg
                t="1732608235426"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="2967"
                width="20"
                height="20"
              >
                <path
                  d="M902.3 362.3c0-49.4-19.2-95.9-54.2-130.8-25.6-25.6-57.5-42.8-92.2-50.1 67.1 47.2 83.8 175.4 39.5 253.7-98.7 151-202 241.4-332.6 364.1 15.8 13.9 32.2 28.1 49.4 42.8C628 742 902.3 498.8 902.3 362.3z"
                  fill="#FFD524"
                  p-id="2968"
                ></path>
                <path
                  d="M107.9 279.9c4.6 2.7 9.6 3.9 14.6 3.9 10 0 19.7-5.2 25.1-14.4 1.2-2.1 2.5-4.2 3.8-6.2 8.6-13.5 4.6-31.5-8.9-40.1-13.5-8.6-31.5-4.6-40.1 8.9-1.7 2.7-3.4 5.4-5 8.1-8.1 14-3.4 31.7 10.5 39.8z"
                  fill="#333333"
                  p-id="2969"
                ></path>
                <path
                  d="M889.2 190.4c-45.9-45.9-107-71.2-171.9-71.2-85 0-161.1 43.1-204.9 111.8-43.7-68.8-119.8-111.8-204.8-111.8-44.7 0-88.4 12.2-126.4 35.4-13.7 8.3-18 26.2-9.7 39.9s26.2 18 39.9 9.7c28.9-17.6 62.1-26.9 96.2-26.9 82.1 0 153.3 52.7 177.1 131.2 3.7 12.2 15 20.6 27.8 20.6s24.1-8.4 27.8-20.6c23.8-78.5 95-131.2 177.1-131.2 13.2 0 26.1 1.4 38.7 4.1 34.7 7.3 66.5 24.5 92.2 50.1 35 34.9 54.2 81.4 54.2 130.8 0 136.5-274.3 379.7-390.1 479.6-17.2-14.7-33.7-28.9-49.4-42.8-294.3-258.9-340.5-383.9-340.5-436.8 0-16-13-29-29-29s-29 13-29 29c0 118.7 144.4 300.4 429.3 539.9 5.4 4.5 12 6.8 18.7 6.8 6.7 0 13.5-2.3 18.9-7 199.7-171.6 429-388 429-539.7 0-64.9-25.3-126-71.2-171.9z"
                  fill="#333333"
                  p-id="2970"
                ></path>
              </svg>
              <small>{{ item.likes }}</small>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.img-avatar {
  border-radius: 20px;
}
.video-container {
  height: 400px;
  position: relative;
  display: flex;
}
.video-input {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 15px;
  padding: 1rem;
  position: absolute;
  z-index: 2;
  border-radius: 24px;
  background-color: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}
.video {
  top: 0;
  position: absolute;
  object-fit: cover;
  object-position: center;
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 400px;
  border-radius: 0.4rem;
}
.video_input::placeholder {
  font-weight: 300;
  color: #efefef;
  font-size: 0.95rem;
  font-family: miranafont, Hiragino Sans GB, STXihei, Microsoft YaHei, SimSun,
    sans-serif;
}
.video_input {
  font-family: miranafont, Hiragino Sans GB, STXihei, Microsoft YaHei, SimSun,
    sans-serif;
  padding-left: 1rem;
  font-weight: 300;
  height: 20px;
  outline: 0;
  background-color: inherit;
  border: 0;
  font-size: 0.95rem;
  color: #fff;
}
.article-avatar {
  border-radius: 50%;

  width: 20px;
  height: 20px;
}
.article-title {
  font-weight: 300;
}
.article-item {
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 20px 20px 0 0;
  background-color: #fff;
  transition: 0.4s;
}
.article-item:hover {
  transform: translateY(-10px);
}
</style>
